<script>
import {areaList} from '@vant/area-data';
import requestUtil from "@/utils/RequestUtil";
import {Toast} from "vant";

export default {
  name: "manageAddress",
  data() {
    return {
      isEdit: this.$route.query.type === 'edit',
      title: this.$route.query.type === 'edit' ? '修改收货地址' : '新增收货地址',
      areaList,
      token: this.$store.state.userInfo.token,
      addressData: {}
    }
  },
  methods: {
    init() {
      if (!this.token) {
        Toast({
          message: '请先登录',
          type: "fail",
          forbidClick: true,
        })
        setTimeout(() => {
          this.$router.back()
        }, 500)
        return
      }
      if (!this.isEdit) {
        return
      }
      requestUtil({
        url: `/user/getUserAddressById/${this.$route.query.addressId}`,
        method: 'get',
        headers: {
          token: this.token
        },
      }).then(res => {
        let data = res.data.data[0]
        this.addressData = {
          id: data.id,
          name: data.name,
          province: data.province,
          tel: data.phone,
          city: data.city,
          county: data.region,
          addressDetail: data.detailAddress,
          isDefault: data.defaultStatus !== 'false'
        }
        console.log(this.addressData)
      })
    },
    onSave(content) {
      let data = {
        name: content.name,
        province: content.province,
        phone: content.tel,
        city: content.city,
        region: content.county,
        detailAddress: content.addressDetail,
        defaultStatus: content.isDefault.toString()
      }
      if (this.isEdit) {
        requestUtil({
          url: '/user/updateUserAddress',
          method: "put",
          headers: {
            token: this.token
          },
          data: {...data, id: parseInt(this.$route.query.addressId)}
        }).then(res => {
          if (res.data.code === 1) {
            Toast({
              message: res.data.msg,
              type: "success",
              forbidClick: true,
            })
            setTimeout(() => {
              this.$router.back()
            }, 500)
          } else {
            Toast({
              message: res.data.msg,
              type: "fail",
              forbidClick: true
            })
          }
        })
      } else {
        requestUtil({
          url: '/user/insertUserAddress',
          method: 'post',
          headers: {
            token: this.token
          },
          data: {...data}
        }).then(res => {
          if (res.data.code === 1) {
            Toast({
              message: res.data.msg,
              type: "success",
              forbidClick: true,
            })
            setTimeout(() => {
              this.$router.back()
            }, 500)
          } else {
            Toast({
              message: res.data.msg,
              type: "fail",
              forbidClick: true
            })
          }
        })
      }
    },
    onDelete() {
      requestUtil({
        url: '/user/deleteUserAddress',
        method: "delete",
        headers: {
          token: this.token
        },
        data: {
          id: this.addressData.id
        }
      }).then(res => {
        if (res.data.code === 1) {
          Toast({
            message: res.data.msg,
            type: "success"
          })
          setTimeout(() => {
            this.$router.back()
          }, 500)
        } else {
          Toast({
            message: res.data.msg,
            type: "fail"
          })
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<template>
  <div>
    <van-nav-bar :title="this.title" safe-area-inset-top @click-left="$router.go(-1)">
      <template #left>
        <van-icon name="arrow-left" style="font-size: 16px;font-weight: bold"/>
      </template>
    </van-nav-bar>
    <van-address-edit
        :address-info="addressData"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        :area-list="areaList"
        :show-delete="isEdit"
        show-set-default
        @delete="onDelete"
        @save="onSave"
    />
  </div>
</template>

<style scoped>

</style>